<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.common.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        #root {
            width: 600px;
            height: 300px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <!-- 创建容器 -->
    <div id="root"></div>
    <script>
        const dom = document.getElementById('root')
        //创建echarts实例
        let myEcharts = echarts.init(dom)
        // 指定图表的配置项和数据
        var option = {
            title: {
                //正标题
                text: 'ECharts 数据可视化',
                //标题位置
                // left: 'center'
            },
            //提示组件
            tooltip: {},
            //展示不同图表形式 切换系列
            legend: {
                data: ['销量']
            },
            //x轴
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            //y轴
            yAxis: {
                //显示y轴的坐标
                asisLine: {
                    show: true
                },
                //显示y轴刻度
                axisTick: {
                    show: true
                }
            },
            //图表的设置
            series: [
                {
                    name: '销量',
                    //图表设置为柱状图
                    //bar柱状图 line折线图 pie饼状图
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],//图标依赖的数据
                    color: 'pink' //柱状图颜色
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myEcharts.setOption(option);
    </script>

</body>

</html>